<template>
  <el-row class="header-shadow">
    <el-col :xs="4" :sm="4" class="hidden-sm-and-up">
      <el-button
        @click="drawer = true"
        icon="el-icon-s-fold"
        circle
      ></el-button>
      <el-drawer
        title="我是标题"
        direction="ltr"
        :size="330"
        :visible.sync="drawer"
        :with-header="false"
      >
        <NavMenu />
        <el-card class="box-card">
          <div class="text item">
            <h1>网站所属</h1>
            gitee@wu-hongzhuo11
          </div>
        </el-card>
      </el-drawer>
    </el-col>
    <el-col :xs="16" :sm="16" :md="16" :lg="6" class="user-logo">
      <img
        src="../assets/logo.png"
        alt="logo"
        class="img-alignment"
        width="30"
      />
      <span class="header-title">吴鸿卓的(element_ui)练习</span>
    </el-col>
    <el-col :xs="4" :sm="4" class="hidden-sm-and-up">
      <el-button icon="el-icon-s-promotion" @click="dialogSearchVisible = true" circle></el-button>
      <el-dialog title="文章搜索" :visible.sync="dialogSearchVisible" width="100%">
        <Search/>

      </el-dialog>
    </el-col>
    <el-col :xs="4" :sm="4" class="hidden-sm-and-down">
      <el-button icon="el-icon-s-promotion" @click="dialogSearchVisible1 = true" circle></el-button>
      <el-dialog title="文章搜索" :visible.sync="dialogSearchVisible1" width="50%">
        <Search/>

      </el-dialog>
    </el-col>
    <el-col
      :xs="24"
      :sm="24"
      :md="24"
      :lg="10"
      :offset="2"
      class="hidden-md-and-down"
    >
      <el-menu mode="horizontal" class="header-nav">
        <HeaderItem
          v-for="headerListsObj in headerLists"
          :key="headerListsObj.id"
          :headerList="headerListsObj"
        />
      </el-menu>
    </el-col>
   
  </el-row>
</template>

<script>
import HeaderItem from "./HeaderItem.vue";
import NavMenu from "./NavMenu.vue";
import Search from "./Search.vue"
export default {
  name: "Header",
  components: { HeaderItem, NavMenu,Search},
  data() {
    return {
      dialogSearchVisible: false,
      dialogSearchVisible1: false,
      direction: "ltr",
      drawer: false,
      activeIndex: "1",
      headerLists: [
        { id: 1, title: "Bilibili" },
        { id: 2, title: "Tiktok" },
        { id: 3, title: "Wechat" },
      ],
      isActive: false,
      searchSpan: 3,
     
    };
  },
  methods: {
    focus() {
      this.searchSpan = 5;
    },
    blur() {
      this.searchSpan = 3;
    },
    
  },
};
</script>

<style scoped>
.el-card {
  box-shadow: 5px 10px 50px 0 rgba(0, 0, 0, 1) !important;
  padding: 0px;
}
.text {
  text-align: center;
}
.el-card__body {
  padding: 10px;
}
.text h1 {
  margin: 0;
  color: silver;
}
.text{
  color: orange;
}
.el-menu {
  height: 100vh !important;
}
.el-menu.el-menu--horizontal {
  border: none;
}
.activeAvatar {
  transform: translate(-25px, 20px) scale(1.4);
  transition: all 0.5s;
  position: relative;
  z-index: 9999;
}
.el-avatar {
  border: 1px solid #eee;
}
.header-nav {
  justify-content: end;
  border: none;
  height: auto !important;
}
.user-logo {
  text-align: center;
  letter-spacing: 0.2rem;
  font-size: 0.1rem;
  background-image: -webkit-linear-gradient(
    left,
    #147b96,
    #e6d205 25%,
    #147b96 50%,
    #e6d205 75%,
    #147b96
  );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-background-size: 200% 100%;
  -webkit-animation: maskedAnimation 4s infinite linear;
}

.header-title {
  font-size: 0.9rem;
  font-weight: bold;
}
.img-alignment {
  vertical-align: middle;
}
@keyframes maskedAnimation {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: -100% 0;
  }
}
.el-autocomplete {
  width: 100%;
}
.header-shadow{
  padding-top: 20px;
}
.box-card{
  height: 11vh !important;
 background-color: rgba(0, 0, 0, 0) !important;
 padding: 0px !important;
}
.el-card__body{
  
}
</style>